---
slug: ../Dialog
---

import Basic from "../../_samples/main/Dialog/Basic/Basic.md";
import DraggableAndResizable from "../../_samples/main/Dialog/DraggableAndResizable/DraggableAndResizable.md";
import BarInDialog from "../../_samples/main/Dialog/BarInDialog/BarInDialog.md";
import WithState from "../../_samples/main/Dialog/WithState/WithState.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Draggable and Resizable
<DraggableAndResizable />

### Usage of Bar as header/footer
The Bar component can be used as header and/or footer of the Dialog
<BarInDialog />

### States
The Dialog supports "Positive", "Critical", "Negative" and "None" states via the "state" property.

<WithState />